<template>
  <van-popup
    v-model="showSelectPaintbrushFlag"
    position='bottom'
    :round="true"
    get-container="body"
    :duration="0.2"
    @close="handleClose">
      <div class="background-container">
        <!-- 头部导航栏 -->
        <div class="header-content">
          <!-- tab栏 -->
          <div class="tab-content">
            <van-tabs
              v-model="active"
              line-width="16"
              sticky
              change="changeTab">
              <van-tab
                v-for="item in tabNav"
                :key="item.id"
                :title="item.name">
              </van-tab>
            </van-tabs>
          </div>

          <!-- 商店和关闭弹窗 -->
          <div class="operation-content">
            <img class="operation-icon" src="@/assets/images/ic_btn_market.png" alt="">
            <img @click="handleClose" class="operation-icon" src="@/assets/images/ic_btn_fold.png" alt="">
          </div>
        </div>
        <!-- 内容选择 lazy-load-->
        <van-tabs
          class="image-content"
          line-width="0"
          line-height="0">
          <van-tab
            v-for="item in pasterListData.list"
            :key="item.id"
            :title="item.name">
            <van-row type="flex" gutter="12" justify="start">
              <van-col
                v-for="sub_item in item.stickers"
                :key="sub_item.id"
                span="6"
                class="image-item">
                <van-image
                  class="img-cover"
                  radius="6"
                  lazy-load
                  :src="sub_item.cover_url"
                />
              </van-col>
            </van-row>
          </van-tab>
        </van-tabs>
      </div>
    </van-popup>
</template>

<script>
import pasterListData from '@/assets/utils/paster'
export default {

  data() {
    return {
      active: 0,
      tabNav: [{
        name: '套图',
        id: 1
      }, {
        name: '明星',
        id: 2
      }, {
        name: '单品',
        id: 4
      }, {
        name: '日常',
        id: 3
      }],
      pasterListData: pasterListData,
      showSelectPaintbrushFlag: false,
    };
  },

  watch: {
    '$store.state.design.currentSelectionType': {
      immediate: true,
      handler(val, oldVal) {
        const footerContainerEl = document.querySelector('#footer-container');
        if (val === 'paintbrush') {
          footerContainerEl.style.zIndex = '999';
          this.showSelectPaintbrushFlag = !this.showSelectPaintbrushFlag;
        } else if (oldVal === 'paintbrush') {
          this.showSelectPaintbrushFlag = false;
        }
      } 
    }
  },

  created() {
    console.log('激活activated');
  },

  methods: {
    // 关闭弹窗
    handleClose() {
      this.showSelectPaintbrushFlag = false;
      this.$emit('onClose', 'paintbrush');
    },
  }
};
</script>

<style lang="less" scoped>
  .background-container{
    height: 68vh;
    width: 100vw;
    padding-bottom: 68px;
    display: flex;
    flex-direction: column;

    .header-content{
      display: flex;
      width: 100vw;
      height: 58px;
      align-items: center;
      position: relative;

      &::before{
        display: block;
        content: '';
        position: absolute;
        bottom: 0;
        width: 200%;
        left: 0;
        border-bottom: 1px solid #eaeaea;
        transform: scale(0.5);
        transform-origin: left bottom;
      }
    }

    .tab-content{
      width: 280px;
    }

    .operation-content{
      display: flex;
      flex: 1;
      padding: 0 8px;
      justify-content: space-around;
      position: relative;

      &::before{
        display: block;
        content: "";
        height: 24px;
        width: 1px;
        background: #eaeaea;
        position: absolute;
        top: 0;
        left: 5px;
        bottom: 0;
        margin: auto;
      }

      .operation-icon{
        width: 20px;
        height: 20px;
        display: block;
      }
    }

    .image-content{
      flex: 1;
      overflow: hidden;
      position: relative;
      padding: 0 12px 0 12px;
      display: flex;
      flex-direction: column;

      .image-item{
        margin-bottom: 12px;
      }

      .img-cover{
        width: 100%;
        background: #eaeaea;
      }
    }
  }
</style>

<style lang="less">
  .image-content{

    .van-tabs__wrap{
      width: 100%;
      height: 48px;

      .van-tab{
        padding: 0 4px;

        .van-tab__text{
          font-size: 12px;
          background: #eaeaea;
          height: 24px;
          line-height: 24px;
          padding: 0 12px;
          border-radius: 12px;
        }
      }

      .van-tab--active{

        .van-tab__text{
          background: #8da6ef;
          color: #fff;
        }
      }
    }

    .van-tabs__content{
      width: 100%;
      height: calc(100% - 48px);
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
</style>
